<template>
  <div class="wft-w-h-100" :style="textStyle">
    <span :ref="attrs.ref">{{ value }}</span>
  </div>
</template>
<script setup lang='ts'>
import { useAttrs, useTempValue } from 'generator/hooks'
import { computed } from 'vue'

const props = defineProps<{
  panelJson: TPanel
  curComp: TComp
}>()

const attrs = useAttrs(props.curComp.attrs)

const value = useTempValue(attrs, props.curComp, props.panelJson)

const textStyle = computed(() => {
  const { color, fontWeight, fontStyle, textDecoration, fontSize } = attrs.value as any
  return {
    color,
    fontWeight,
    fontStyle,
    textDecoration,
    fontSize: fontSize + 'px'
  }
})
</script>
<style scoped>
.wft-w-h-100 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>